<template>
	<view class="form-item-content f-c-sb">
		<view class="form-item f-c f-1" :class="{block,inline}">
			<view class="f-c form-label" v-if="label" :style="labelStyle">
				<text class="required" v-if="required">*</text>
				{{label}}
			</view>
			<slot v-else name="label" />
			<view class="form-content">
				<view class="f-c form-inner">
					<slot />
				</view>
				<slot name="content" />
			</view>
			<view class="excate" v-if="excate">{{excate}}</view>
			<slot v-else name="excate" />
		</view>
		<view class="form-error" v-if="error">{{error}}</view>
	</view>
</template>

<script setup>
	import {computed} from 'vue'
	defineProps(['label','error','block','inline','required','excate','labelStyle'])
</script>

<style lang="scss" scoped>
	.form-content{
		flex:1;
		input{
			text-align: right;
		}
		:deep(.desc){
			margin:0;
			margin-bottom:$uni-spacing-col-base;
			background-color: $uni-bg-color-grey;
			padding:$uni-spacing-col-sm $uni-spacing-col-base;
		}
	}
	.form-inner{
		flex:1;
		width:100%;
		:deep(.uni-input-input){
			font-size: 28rpx;
		}
		:deep(.picker){
			flex:1;
			padding:24rpx 0;
		}
		:deep(.ico){
			padding:$uni-spacing-col-sm;
			margin-right:-1.5*$uni-spacing-col-sm;
		}
		:deep(.value){
			font-size: 28rpx;
		}
		:deep(.input){
			flex:1;
			padding:24rpx 0;
			font-size: 28rpx;
		}
		:deep(.select){
			flex:1;
			padding:24rpx 0;
			font-size: 28rpx;
		}
		:deep(.input,.picker,.select,.value){
			flex:1;
			width:100%;
			padding:24rpx 0;
			font-size: 28rpx;
		}
		:deep(.scan-box){
			flex:1;
		}
		:deep(picker){
			flex:1;
			font-size: 28rpx;
		}
		:deep(.placeholder){
			color: $uni-text-color-placeholder;
		}
		:deep(.picker){
			display: flex;
			flex:1;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			&:after{
				content:'';
				display: block;
				width:12rpx;
				height:12rpx;
				border:3rpx solid $uni-border-color;
				border-right:none;
				border-top:none;
				transform: rotate(-135deg);
				margin-left:10rpx;
				margin-right:20rpx;
			}
		}
	}
	.form-item{
		display:flex;
		align:center;
		&-content{
			padding:0 $uni-spacing-col-base;
			border-bottom: 1rpx solid $uni-border-color;
		}
		.required{
			color: $uni-color-error;
			margin-right:4rpx;
			padding-top:5rpx;
		}
		&.block{
			display:block;
			.form-label{
				width:100%;
				padding-bottom: 0;
			}
		}
		
	}
	.form-label{
		width:162rpx;
		font-size: 24rpx;
		padding:24rpx 0;
		margin-right: 15rpx;
	}
	.form-error{
		color: $uni-color-error;
		font-size: 22rpx;
		padding: $uni-spacing-col-base;
	}
</style>